setPage();

function setPage(){
    let cart = localStorage.cart;
    if(cart === undefined){
      $('.container').html(`<h1>购物车没有添加过内容</h1>`);
    }else{
      cart = JSON.parse(cart);
      console.log(cart);
      if(cart.length === 0){
        $('.container').html(`<h1>购物车内容已清空，需要重新添加</h1>`);
      }else{
        let str='';
        let type = 0;
        let number = 0;
        let pay = 0;
        let bool = true;

        str += `
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all"type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
              `;
        cart.forEach(function(item,key){
          if(item.buy === false){
            bool = false;
          }else{
            type += 1;
            number += item.num - 0;
            pay += number*(item.goods_price - 0);
          }
          str += `
              
              <li class="cart-item">
                <div class="left">
                  <input name="goods" index="${key}"  goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" index="${key}" type="button" class="btn btn-default" ${ item.num === 1 ? 'disabled' : "" }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" index="${key}" type="button" class="btn btn-default" ${ item.num === item.goods_number-0 ? 'disabled' : "" }>+</button>
                      </div>
                      <button name="del" index="${key}" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
        })
        str += `
              </ul>
              </div>

              <div>
                <h2>您一共购买<span class='span1'> ${type} </span>种 商品，共购买<span class='span1'> ${number}  </span>件 商品，需支付<span class='span2'> ${pay.toFixed(2)}</span>元</h2>
              </div>
            </div>
          `;
        $('.container').html(str);
        $('[name="all"]').prop('checked',bool);
      }
    }
  }
  $('.container').click(function(e){
    let cart = JSON.parse(localStorage.cart);
    if(e.target.getAttribute('name') === 'all'){
      cart.forEach((item)=>{
        item.buy = e.target.checked;
      })
    }else if(e.target.getAttribute('name') === 'goods'){
      cart[e.target.getAttribute('index')].buy = e.target.checked;
    }else if(e.target.getAttribute('name') === 'del'){
      cart.splice(e.target.getAttribute('index'),1);
    }else if(e.target.getAttribute('name') === '-'){
      cart[e.target.getAttribute('index')].num -=1;
    }else if(e.target.getAttribute('name') === '+'){
      cart[e.target.getAttribute('index')].num++;
    }
    localStorage.cart=JSON.stringify(cart);
    setPage();
  })